<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>
		
		<script>
/*			javascript中: (function(){})()
			是匿名函数，主要利用函数内的变量作用域，避免产生全局变量，影响整体页面环境，增加代码的兼容性。
			(function(){})是一个标准的函数定义，但是没有复制给任何变量。所以是没有名字的函数，叫匿名函数。
			没有名字就无法像普通函数那样随时随地调用了，所以在他定义完成后就马上调用他，
			后面的括号()是运行这个函数的意思。*/
			//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
			// $(function () {
			// 	//1. 获取数据行的奇数行的tr，设置背景色为pink
			// 	$("tr:gt(1):odd").css("backgroundColor","pink");
			// 	//2. 获取数据行的偶数行的tr,设置背景色为yellow
            //     $("tr:gt(1):even").css("backgroundColor","yellow");
            // });
			$(function(){
				//:过滤器
				//$("tr:gt(1):odd")获取所有的编号>1的tr标签,再用一个过滤器,选择奇数行
				$("tr:gt(1):odd").css("backgroundColor","pink");
				$("tr:gt(1):even").css("backgroundColor","yellow");
			});

		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="删除"></td>
			</tr>
			<tr style="background-color: #999999;">
				<th><input type="checkbox"></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>0</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>
